<script setup lang="ts">
import { WholeSiteAccelerator } from '@icon-park/vue-next'
import { useFeedbackController } from '@/utils/feedback-util'
import { ref, watch } from 'vue'
import { doQueryOperatorInfo, OperatorPackageInfoResponse } from '@/api/operator-package-api'

const props = defineProps(['modelValue', 'id', 'name', 'tag'])
const emits = defineEmits(['update:modelValue'])

//<--对话框打开关闭控制
const { isShow } = useFeedbackController(props, emits)
//对话框打开关闭控制-->

const infos = ref<Array<OperatorPackageInfoResponse>>([])

const currentInfo = ref<OperatorPackageInfoResponse>()

watch(isShow, () => {
  if (!isShow.value) {
    return
  }
  doQueryOperatorInfo(props.id).then((res) => {
    infos.value = res.data
    currentInfo.value = infos.value[0]
  })
})
</script>

<template>
  <el-dialog
    class="function-package-info"
    v-model="isShow"
    :show-close="true"
    width="65%"
    top="10vh"
  >
    <template #header>
      <div style="display: flex; align-items: flex-end">
        {{ name }}
        <span
          style="
            font-size: 12px;
            color: var(--el-text-color-placeholder) !important;
            padding-left: 10px;
          "
        >
          {{ tag }}
        </span>
      </div>
    </template>
    <el-container>
      <el-aside width="200px" class="info-aside">
        <el-scrollbar height="500px">
          <el-menu style="height: 500px" :default-active="currentInfo?.className">
            <el-menu-item
              @click="currentInfo = item"
              v-for="item in infos"
              :key="item"
              :index="item.className"
            >
              {{ item.name }}
            </el-menu-item>
          </el-menu>
        </el-scrollbar>
      </el-aside>
      <el-main class="info-main">
        <div class="title">
          <div class="icon">
            <whole-site-accelerator fill="#fff" :size="25" :strokeWidth="3" />
          </div>
          <div class="title-content">
            <div class="main-title">{{ currentInfo?.name }}</div>
            <div class="sub-title">{{ currentInfo?.className }}</div>
          </div>
        </div>
        <el-scrollbar style="max-height: 405px; margin-top: 10px; padding-right: 10px">
          <div class="content">
            {{ currentInfo?.description }}
          </div>
          <div class="parameter-info">
            <div style="font-weight: bolder; padding: 15px 0">入参信息</div>
            <el-table
              header-row-class-name="parameter-info-table-header"
              :border="true"
              :data="[
                {
                  name: '最小值',
                  key: 'min',
                  type: 'input'
                },
                {
                  name: '最大值',
                  key: 'max',
                  type: 'input'
                },
                {
                  name: '类型',
                  key: 'type',
                  type: 'select'
                }
              ]"
            >
              <el-table-column prop="name" label="名称" />
              <el-table-column prop="key" label="key" />
              <el-table-column prop="type" label="类型" />
            </el-table>
          </div>
        </el-scrollbar>
      </el-main>
    </el-container>
  </el-dialog>
</template>

<style scoped lang="scss">
.function-package-info {
  .info-aside {
    .el-menu {
      font-size: 13px;
    }
  }

  .info-main {
    .title {
      display: flex;
      align-items: flex-start;
      justify-content: flex-start;

      .icon {
        border-radius: 5px;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        background-color: var(--el-color-primary);

        span {
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }

      .title-content {
        margin-left: 10px;

        .main-title {
          font-size: 16px;
          font-weight: bolder;
        }

        .sub-title {
          margin-top: 5px;
          color: var(--el-color-primary);
        }
      }
    }

    .content {
      letter-spacing: 1px;
    }

    .parameter-info {
      margin-bottom: 5px;
    }
  }
}
</style>
<style lang="scss">
.function-package-info {
  .el-dialog__header {
    margin-right: 0;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--el-border-color);
  }

  .el-dialog__body {
    padding: 0;
  }

  .parameter-info {
    .parameter-info-table-header {
      --el-table-header-bg-color: var(--el-table-current-row-bg-color);
      color: var(--el-text-color-regular) !important;
    }
  }
}
</style>
